<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <h:outputStylesheet library="css" name="style.css" />
        <title>molAR - molecular online laboratory  - Alignment Resources</title>
    </h:head>
    <h:body>
        <!--
        <h:outputScript library="js" name="JSmol.min.js" />
        <h:outputScript library="js" name="test.js" />   
        -->
        <p:panel id="container">
            <p:panel id="header">
                molAR - molecular online laboratory: Alignment Resources
            </p:panel>
            <p:panel id="formContainer" styleClass="formContainer">
                <h:form id="seqForm">
                    <p:megaMenu>
                        <p:menuitem value="Home" />
                        <p:menuitem value="Alignment Tools" />
                        <p:menuitem value="3D" />
                    </p:megaMenu>
                    <p:panel id="content" styleClass="content">
                        <p:panel>
                            <p:inputTextarea id="sequence1" required="true"                            
                                             value="#{fileUploadController.sequence1}" rows="5"
                                             styleClass="sequenceArea" autoResize="false" />
                            <p:fileUpload  auto="true" update="seqForm:sequence1"
                                           fileUploadListener="#{fileUploadController.fileUploadListener1}"/>
                        </p:panel>
                        <p:panel>
                            <p:inputTextarea id="sequence2" required="true" 
                                             value="#{fileUploadController.sequence2}" rows="5"
                                         styleClass="sequenceArea" autoResize="false"/>
                            <p:fileUpload  auto="true" update="seqForm:sequence2"
                                           fileUploadListener="#{fileUploadController.fileUploadListener2}"/>              
                        </p:panel>
                        <p:panel>
                            <p:inputTextarea id="result"  styleClass="sequenceArea"
                                         value="#{alignmentRedirect.alignment}" 
                                         rows="5" autoResize="false" disabled="true" /> 
                        </p:panel>
                        <p:panel>
                            <p:commandLink value="Search Genbank" rendered="#{alignmentRedirect.genbankLink}" />
                        </p:panel>
                        <p:panel>
                            <p:selectOneMenu value="#{alignmentsMenu.alignment}" effect="fade">
                                <f:selectItems value="#{alignmentsMenu.alignmentsMenu}" />
                            </p:selectOneMenu>
                        </p:panel>
                        <p:panel>
                            <p:commandButton id="alignButton" value="Align!" 
                                             action="#{alignmentRedirect.returnAlignment}"
                                             update="seqForm:content"  />
                        </p:panel>
                    </p:panel>
                    <p:panel id="rightPrefs" styleClass="rightPrefs">
                        <p:inputText id="gaps" size="2" styleClass="prefs"/>
                        <p:inputText size="2" styleClass="prefs" />
                        <p:inputText size="2" styleClass="prefs" />
                        <p:inputText size="2" styleClass="prefs" />
                    </p:panel>
                </h:form>
            </p:panel>
        </p:panel>        
        
        <!-- Molecule 3D Visualization
             For a later use 
        
        <p:panel rendered="false">
            <script type="text/javascript">

                jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)

             </script>
                <script>
                    jmolButton("if (!molname) { molname = 'tylenol'};var x = prompt('Enter the name or identifier (SMILES, InChI, CAS) of a molecule',molname);if (!x) { quit }; molname = x; load @{'$' + molname}","Load MOL by NAME")
                </script>
        </p:panel>
         End -->
    </h:body>
</html>

